<!DOCTYPE html>
<html lang="zh">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./bulma.min.css" rel="stylesheet">
<link href="./css/all.min.css" rel="stylesheet">
<!-- 引入Vue.js -->
<script src="./js/Vue.js"></script>
<title>用户积分-记录</title>
</head>

<body>
    <div id="app">
        <section class="section top-section-bg">
            <div class="level is-mobile is-justify-content-space-around">
                <div class="level-left">
                    <div class="level-item has-text-centered">
                        <div>
                            <p class="title has-text-white">0</p>
                            <p class="heading has-text-white">正式积分</p>
                        </div>
                    </div>
                    <div class="level-item has-text-centered">
                        <div>
                            <button class="button  is-rounded is-fixed-width" @click="testMethod"
                                style="color: blue; font-weight: 600;">消费记录</button>
                        </div>
                    </div>
                </div>
                <div class="level-right">
                    <div class="level-item has-text-centered">
                        <div>
                            <p class="title has-text-white">0</p>
                            <p class="heading has-text-white">临时积分</p>
                        </div>
                    </div>
                    <div class="level-item has-text-centered">
                        <div>
                            <button class="button is-link is-rounded is-primary is-fixed-width "
                                style="color: white; font-weight: 600;">去充值</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <article class="panel is-link">
            <p class="panel-heading panel-heading-style is-size-6">积分记录</p>
            <div class="box">
                <article class="media mt-0 mb-0">
                    <div class="media-content is-flex is-justify-content-space-between">
                        <div class="content">
                            <p>
                                <strong>邀请好友赚取积分</strong>
                                <br />
                                <small class="is-size-7 has-text-text-70">2024-07-18 15：25</small>
                            </p>
                        </div>
                        <div>
                            <span class="has-text-link">+30</span>
                        </div>
                    </div>
                </article>
                <article class="media mt-0 mb-0">
                    <div class="media-content is-flex is-justify-content-space-between">
                        <div class="content">
                            <p>
                                <strong>每日签到</strong>
                                <br />
                                <small class="is-size-7 has-text-text-70">2024-07-18 15：25</small>
                            </p>
                        </div>
                        <div>
                            <span class="has-text-link is-size-6">+10</span>
                        </div>
                    </div>
                </article>
            </div>
        </article>
        <div class="box">
            <article class="media">

                <div class="media-content">
                    <div class="content">
                        <p>
                            <strong>温馨提示</strong>
                            <br />
                            <small>如有疑问，请与河狸帮客服联系</small>
                        </p>
                    </div>
                </div>
            </article>
        </div>
    </div>
</body>
<script>
    // 创建一个Vue实例
    new Vue({
      el: '#app',
      data: {
        message: 'Hello, Vue in HTML5!'
      },
      methods: {
        testMethod(){
            alert('aa')
        }
      },
    });
  </script>
<style>
    .is-fixed-width {
        min-width: 110px;
        /* 您可以根据需要设置固定宽度 */
    }

    .top-section-bg {
        background-image: url('./images/userIntegralTopBg.png');
        background-size: contain;
    }

    .panel-heading-style {
        margin-top: -10px;
        background-color: white;
        color: black;
    }
</style>

</html>